<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>
    <title>Document</title>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="../../src/three.js"></script>
    <script src="../../src/OrbitControls.js"></script>
    <script src="../../src/loaders/OBJLoader.js"></script>
</head>
<body>
    
</body>
<script type="x-shader/x-vertex" id="vertexShader"></script>
<script type="x-shader/x-vertex" id="fragmentShader"></script>
<script>
    var scene, camera, renderer, clock, controlller
    // var shadermaterial
    init()
    animate()

    // - Functions -
    function init(){
        scene = new THREE.Scene()
        clock = new THREE.Clock();
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
        camera.position.z = 200,
        camera.position.x = 200,
        camera.position.y = 200
        renderer = new THREE.WebGLRenderer({
            antialias:true, // 开启抗锯齿处理
            alpha:true
        })
        // renderer.setClearColor(new THREE.Color(0x000000))
        renderer.setSize(window.innerWidth,window.innerHeight)
         // - Manager -

         if(typeof(Worker)!=="undefined"){
                var myWorker = new Worker('./test_load.js')
                myWorker.onmessage = function(e) {
                    var loadedGeometry = JSON.parse(e.data)
                    var loader = new THREE.ObjectLoader()
                    var group = loader.parse(loadedGeometry)
                   
                    function loadModel() {
                        group.traverse( function ( child ) {
                            if ( child.isMesh ) child.material.map = texture;
                        } );
                        group.position.y = - 95;
                        scene.add( group );
                    }

                    var manager = new THREE.LoadingManager( loadModel )
                        manager.onProgress = function ( item, loaded, total ) {
                    }

                    var textureLoader = new THREE.TextureLoader(manager)
                    var texture = textureLoader.load( './UV_Grid_Sm.jpg' )
                }
            }else{
                console.log('web worker not support')
            }

        var axisHelper = new THREE.AxesHelper( 10 )
        scene.add( axisHelper )

        /**
            * 光源设置
            */
        // 方向光1
        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.9);
        directionalLight.position.set(400, 200, 300);
        // directionalLight.castShadow = true
        scene.add(directionalLight);
        // 方向光2
        var directionalLight2 = new THREE.DirectionalLight(0xffffff, 0.9);
        directionalLight2.position.set(-400, -200, -300);
        scene.add(directionalLight2);
        //环境光
        var ambient = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambient);

        controlller = new THREE.OrbitControls(camera,renderer.domElement)
        document.body.appendChild(renderer.domElement)
        window.onresize = onResize
    }

    function animate(){
        requestAnimationFrame(animate)
        renderer.render(scene, camera)
        controlller.update(clock.getDelta())
    }

    function onResize() {
        camera.aspect = window.innerWidth / window.innerHeight
        camera.updateProjectionMatrix()
        renderer.setSize(window.innerWidth, window.innerHeight)
    }
</script>
</html>